<template>
    <div>
        <el-upload
            class="avatar-uploader"
            :headers="headers"
            :action="url"
            :data="{bizId,bizType}"
            :show-file-list="false"
            :on-success="handleUploadSuccess"
            :before-upload="handleBeforeUpload">
                <i class="el-icon-camera" style="font-size: 20px;" v-if="!value"></i>
                
                <img v-if="value" :src="value" class="avatar">
            
        </el-upload>
        <!-- <el-dialog :visible.sync="dialogVisible" center append-to-body>
            <img width="100%" :src="value" alt="">
        </el-dialog> -->
    </div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { previewFile } from '@/utils/index'
import { deleteFile } from '@/api/file/file'

export default {
    name: 'file-upload-input',
    props: {
        // 值  {id,fileName,fileType,filePath }
        value: {
            type: String,
            default: undefined,
        },
        otherList: {
            type: Array,
            default: undefined,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
        bizId: { type: [String, Number], default: '' },
        bizType: {
            type: String,
            default: 'UPLOAD_FILE',
        },
    },
    data() {
        return {
            fileName: '',
            loading: false,
            filePre: ['pdf', 'ppt'],
            ref: new Date().getTime(),
            imgSuf: ['png', 'jpg', 'jepg', 'gif', 'svg'],
            // url: process.env.VUE_APP_DCC_API  + '/v1/oss/file/upload',
            url: process.env.VUE_APP_BASE_API + '/file/file/upload',
            headers: { Authorization: 'Bearer ' + getToken() },
            fileList: [],
            imgs: [],
            dialogImageUrl: '',
            dialogVisible: false,
        }
    },
    watch: {
        otherList: {
            handler(val) {
                let fileList = [...val]
                fileList.forEach((io) => {
                    io.name = io.originalFileName
                })
                this.fileList = fileList
                console.log('watch===>', val)
                this.$forceUpdate()
            },
        },
    },
    methods: {
        handleBeforeUpload(file) {
            this.fileName = file.name
            const imgs = [
                'image/jpeg',
                'image/jpg',
                'image/png',
                'image/gif',
                'image/svg',
            ]
            const isImg = imgs.includes(file.type)
            const isLt2M = file.size / 1024 / 1024 < 5

            if (!isImg) {
                this.$message.error('上传图片格式错误!')
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 5MB!')
            }
            return isLt2M && isImg
        },
        handleUploadSuccess(res, file, fileList) {
            this.imgs = fileList
            if (res.code == 200) {
                console.log(fileList)
                const { fileName } = this
                this.$emit('input', res.data.url)
                this.$emit('change', res.data)
                this.$parent.$emit('el.form.change')
            }
        },
        handlePreview() {
            previewFile(this.value.id, this)
        },
        handleRemove(file, fileList) {
            this.imgs = fileList
            let removeId = file.response ? file.response.data.id : file.id
            deleteFile(removeId).then((res) => {})
            this.$emit('change', fileList)
        },
        handlePictureCardPreview(e) {
            const url = e.url || e.response.data.url
            this.dialogImageUrl = url
            this.dialogVisible = true
        },
    },
}
</script>

<style  >
 .avatar-uploader   {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden; 
    width: 70px;
    height: 70px;
    display: flex;
    
    justify-content: center;
    align-items: center;
  }
  .avatar-uploader:hover {
    border-color: #409EFF;
  }
 
  .avatar {
    width: 70px;
    height: 70px;
    display: block;
  }
</style>

